<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="java.util.Date" %>
<%@page import="java.text.SimpleDateFormat" %>
	<%
		Date now=new Date();
		Date nextDay=new Date(now.getTime()+3600*24*1000);//一天后
		SimpleDateFormat format=new SimpleDateFormat("MM/dd/yyyy");//设置格式
		String nowStr=format.format(now);
		String nextStr=format.format(nextDay);
	%>
	<!-- 换房信息输入框 -->
	<div role="tabpanel" class="tab-pane" id="chan">
		<div id="reserveInforDiv" style="padding: 50px 0;margin-top: 50px;background-color: #fff; text-align: right;width: 420px;margin: 50px auto;">
			<div class="form-horizontal">
				<div class="form-group">
					<label for="" class="col-xs-4 control-label">入住时间:</label>
					<div class="col-xs-5">
						<input type="text" disabled class="form-control" value='<%=nowStr %>' id="date-start">
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-xs-4 control-label">退房时间:</label>
					<div class="col-xs-5">
						<input type="text" class="form-control" value='<%=nextStr%>' id="date-end">
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-xs-4 control-label">房间类型:</label>
					<div class="col-xs-5">
						<select class="col-xs-10 control-label" id="typeId"></select>
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-xs-4 control-label">房间名称:</label>
					<div class="col-xs-5">
						<select class="col-xs-10 control-label" id="room"></select>
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-xs-4 control-label">价格:</label>
					<div class="col-xs-5">
						<label class="col-xs-10 control-label" id='price'></label>
						<input type="hidden" id="calcPrice">
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-xs-4 control-label">图片:</label>
					<div class="col-xs-5">
						<img id='pic' height='100' width='100'><br>
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-xs-4 control-label">添加时间:</label>
					<div class="col-xs-5">
						<label class="col-xs-10 control-label" id='addDate'></label>
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-xs-4 control-label">备注:</label>
					<div class="col-xs-5">
						<label class="col-xs-10 control-label" id='zcomment'></label>
					</div>
				</div>
				<input type="hidden" id="roomId">
				<div class="form-group text-right">
					<div class="col-xs-offset-4 col-xs-5" style="margin-left: 169px;">
						<button  class="btn btn-xs btn-white" id="cancel" onclick="location.href='/hotel/system/mainPage'">取消</button>
						<button  class="btn btn-xs btn-green" id='lock'>锁定该房间</button>
					</div>
				</div>
				<div id="detailDiv">
					<div class="form-group">
						<label for="" class="col-xs-4 control-label">电话号码:</label>
						<div class="col-xs-5">
							<input class="form-control input-sm duiqi" type="text" id="phone"><br>
						</div>
					</div>
					<div class="form-group">
						<label for="" class="col-xs-4 control-label">身份证号:</label>
						<div class="col-xs-5">
							<input class="form-control input-sm duiqi" type="text" id="idCardNo"><br>
						</div>
					</div>
					<div class="form-group">
					<label for="" class="col-xs-4 control-label">收费:</label>
						<div class="col-xs-5">
							<label class="col-xs-10 control-label" id='cost'></label>
						</div>
					</div>
					<div class="form-group">
						<label for="" class="col-xs-4 control-label">备注:</label>
						<div class="col-xs-5">
							<textarea class="form-control input-sm duiqi" cols="20" rows="10" id="checkInComment"></textarea>
						</div>
					</div>
					<div class="col-xs-offset-4 col-xs-5" style="margin-left: 169px;">
						<button  class="btn btn-xs btn-green" id='sub'>入住办理</button>
					</div>
				</div>
			</div>
		</div>
	</div>
<style>
	#detailDiv{
		display:none;
	}
</style>
<script src="/hotel/visitor/js/jquery-2.1.4.min.js"></script>
<script src="/hotel/visitor/js/superfish.js"></script>
<script src="/hotel/visitor/js/jquery.waypoints.min.js"></script>
<script src="/hotel/visitor/js/jquery.countTo.js"></script>
<script src="/hotel/visitor/js/jquery.stellar.min.js"></script>
<script src="/hotel/visitor/js/jquery.flexslider-min.js"></script>
<script src="/hotel/visitor/js/bootstrap-datepicker.min.js"></script>
<script src="/hotel/visitor/js/custom.js"></script>
<script type="text/javascript" src="/hotel/js/timeUtil.js"></script>
<script>
function clearRoomInfor(){
	$('#roomId').val('')
	$('#price').text('')
	$('#pic').attr('src','')
	$('#addDate').text('')
	$('#zcomment').text('')
}
//更新房间信息
function refreshRoomInfor(id){
	if(id!=null){
		$.get("/hotel/checkIn/roomInfor",{'id':id},function(str){
			//alert(str)
			var res=eval('(' +str + ')')
			if(res.code!=0){
				alert(res.message)
				return;
			}
			room=res.object
			$('#roomId').val(room.id)
			$('#price').text(room.price+'元/日(房型折扣:'+room.typeDiscount+'%,房间折扣:'+room.discount+'%)')
			$('#calcPrice').val(room.price)
			$('#pic').attr('src','/hotel/upload/'+room.pic)
			$('#addDate').text(room.addDate)
			$('#zcomment').text(room.zcomment)
		})
	}
}
//更新类型选择列表
function refreshTypeList(){
	$('#typeId').empty()
	$('#room').empty()
	$.get("/hotel/checkIn/typeList",{},function(str){
		//alert(str)
		var res=eval('(' +str + ')')
		if(res.code!=0){
			alert(res.message)
			return;
		}
		types=res.object
		$('#typeId').append('<option disabled selected>选择房型</option>')
		for(var i=0;i<types.length;i++){
			//alert(types[i].id+' '+types[i].name)
			$('#typeId').append('<option value='+types[i].id+'>'+types[i].name+'</option>')
		}
	})
}

//更新房间选择列表
function refreshRoomList(id){
	//alert('in')
	$('#room').empty()
	//alert($('#data-start').val())
	fromStr=getStandardDate($('#date-start').val())
	toStr=getStandardDate($('#date-end').val())
	//alert(fromStr)
	//alert(toStr)
	$.get("/hotel/checkIn/freeRoomList",{'id':id,'fromStr':fromStr,'toStr':toStr},function(str){
		//alert(str)
		var res=eval('(' +str + ')')
		if(res.code!=0){
			alert(res.message)
			return;
		}
		rooms=res.object
		for(var i=0;i<rooms.length;i++){
			//alert(types[i].id+' '+types[i].name)
			$('#room').append('<option value='+rooms[i].id+'>'+rooms[i].floor+'F-'+rooms[i].name+'</option>')
		}
		//$('#room').val(rooms[0].id)
		if(rooms.length>0){//如果有符合条件的房间
			refreshRoomInfor(rooms[0].id)	//更新房间信息
		}
	})
}
//锁定某房间
function lockRoom(id,code){
	$.post("/hotel/checkIn/lockRoom",{'id':id,'code':code},function(str){
		//alert(str)
		var res=eval('(' +str + ')')
		if(res.code!=0){
			alert(res.message)
			refreshTypeList()
			return;
		}
	})
}
//计算并展示价格
function showPrice(){
	fromStr=getStandardDate($('#date-start').val())
	toStr=getStandardDate($('#date-end').val())
	//算法有问题
	price=getDurDays(fromStr,toStr)*$('#calcPrice').val()	//普通房价格计算法
	$('#cost').text(price+'元')
}
$('#date-end').change(function(){
	clearRoomInfor()
	refreshRoomList($('#typeId').val())
})
$('#typeId').change(function(){
	clearRoomInfor()
	refreshRoomList($('#typeId').val())
})
$('#room').change(function(){
	refreshRoomInfor($('#room').val())
})
$('#lock').click(function(){
	if($('#lock').text()=='锁定该房间'){
		$('#detailDiv').css('display','block')
		$('#lock').text('解锁该房间')
		lockRoom($('#roomId').val(),1)
		showPrice()
		$('#cancel').attr("disabled", true);	//隐藏取消按钮
	}else{
		$('#detailDiv').css('display','none')
		$('#lock').text('锁定该房间')
		$('#cancel').attr("disabled", false);	//显示取消按钮
		lockRoom($('#roomId').val(),0)
	}
})
$('#sub').click(function(){
	fromStr=getStandardDate($('#date-start').val())
	toStr=getStandardDate($('#date-end').val())
	data={'phone':$('#phone').val(),'idCardNo':$('#idCardNo').val(),'dateStr1':fromStr,'dateStr2':toStr,
			'zcomment':$('#checkInComment').text(),'roomId':$('#roomId').val()}
	//alert(JSON.stringify(data))
	$.post("/hotel/checkIn/offlineCheck",data,function(str){
		//alert(str)
		var res=eval('(' +str + ')')
		if(res.code!=0){
			alert(res.message)
			//refreshTypeList()
			return;
		}else{
			window.location.href="/hotel/system/mainPage"
		}
	})
})


refreshTypeList()
</script>